<template>
  <div class="home">
    <!-- 顶部导航 -->
    <nav-bar></nav-bar>
    <!-- 滚动导航 -->
    <div class="category">
      <van-tabs v-model="active" swipeable sticky animated>
        <van-tab v-for="(item,index) in category" :title="item.title" :key="index">
          <!-- 下拉加载更多 -->
          <van-list v-model="item.loading"
            :finished="item.finished"
            finished-text="我也是有底线的"
            :immediate-check="false"
            @load="onLoad"
          >
            <div class="detail_parent">
              <cover class="detail_item" :detailitem="categoryitem"  v-for="(categoryitem,idx) in item.list" :key="idx" />
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
      <div class="category_ico" @click="$router.push('/editcategory')">
        <van-icon name="setting-o" />
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '../components/common/NavBar.vue'
import Cover from './Cover.vue'
export default {
  data () {
    return {
      category: [],
      active: 0
    }
  },
  created () {
    this.getCategory()
  },
  // 组件激活(切换)时候调用 一般在keep-alive中使用
  activated () {
    if (localStorage.getItem('newCat')) {
      const newCat = JSON.parse(localStorage.getItem('newCat'))
      this.category = this.changeCategory(newCat)
      this.getArticle()
    }
  },
  methods: {
    // 获取导航数据
    async getCategory () {
      if (localStorage.getItem('newCat')) {
        return
      }
      const res = await this.$http.get('/category')
      // console.log(res)
      if (res.status !== 200) return this.$msg.fail('获取导航数据失败')
      this.category = this.changeCategory(res.data)
      this.getArticle()
    },
    // 改造数据
    changeCategory (data) {
      const newCategory = data.map(item => {
        item.list = []
        item.page = 0
        item.pagesize = 10
        item.loading = false
        item.finished = false
        return item
      })
      return newCategory
    },
    // 获取文章数据
    async getArticle () {
      const categoryItem = this.getCategoryItem()
      const res = await this.$http.get('/detail/' + categoryItem._id, {
        params: {
          page: categoryItem.page,
          pagesize: categoryItem.pagesize
        }
      })
      if (res.status !== 200) return this.$msg.fail('获取文章数据失败')
      categoryItem.list.push(...res.data)
      categoryItem.loading = false
      if (res.data.length < categoryItem.pagesize) {
        categoryItem.finished = true
      }
    },
    getCategoryItem () {
      return this.category[this.active]
    },
    onLoad () {
      const categoryItem = this.getCategoryItem()
      setTimeout(() => {
        categoryItem.page += 1
        this.getArticle()
      }, 1000)
    }
  },
  watch: {
    active () {
      this.getArticle()
    }
  },
  components: {
    NavBar,
    Cover
  }
}
</script>

<style lang="less" scoped>
.home {
  background-color: #fff;
}
.detail_parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  margin: 2.778vw 0;
  .detail_item {
    width: 45%;
  }
}

.category {
  position: relative;
  .category_ico {
    position: absolute;
    top: 3.889vw;
    right: 0;
    width: 6.944vw;
    padding-left: 1.944vw;
    background-color: #fff;
  }
}
</style>
